<template>
    <div style="height: 100%; position: relative">
        <el-drawer
            :title="type==='add'?'新增品牌':'编辑品牌'"
            :visible.sync="show_dialog"
            direction="rtl"
            size="80%"
            custom-class="demo-drawer"
            ref="drawer"
        >
            <div class="demo-drawer__content">
                <el-form :model="form" :rules="rules" v-if="show_dialog" ref="brandDrawer">
                    <el-form-item label="品牌logo" :label-width="formLabelWidth">
                        <!-- <el-upload
                            action="#"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
							:limit="1"
							:auto-upload="false"
							:on-change="change"
							:file-list="file_list"
                        >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
                            <img width="100%" :src="dialogImageUrl" alt="" />
                        </el-dialog>-->
                        <el-upload
                            class="avatar-uploader"
                            action="#"
                            :auto-upload="false"
                            :on-change="change"
                            :show-file-list="false"
                        >
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="品牌名称" :label-width="formLabelWidth" prop="brand_name">
                        <el-input v-model="form.brand_name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品排序" :label-width="formLabelWidth" prop="brand_sort_by">
                        <el-select v-model="form.brand_sort_by" placeholder="商品排序">
                            <el-option label="默认排序" value="默认排序"></el-option>
                            <el-option label="浏览量" value="浏览量"></el-option>
                            <el-option label="成交量" value="成交量"></el-option>
                            <el-option label="更新时间" value="更新时间"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否显示" :label-width="formLabelWidth">
                        <el-switch
                            v-model="form.if_show"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="1"
                            inactive-value="0"
                        ></el-switch>
                    </el-form-item>
                    <el-form-item label="logo排序" :label-width="formLabelWidth" prop="brand_sort">
                        <el-input v-model="form.brand_sort"></el-input>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button
                        type="primary"
                        @click="handleClose"
                        :loading="loading"
                    >{{ loading ? "提交中 ..." : "确 定" }}</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
export default {
    props: ['dialog'],
    data() {
        return {
            loading: false,
            form: {
                brand_name: '',
                brand_sort: '',
                brand_sort_by: '',
                if_show: ''
            },
            item_data: {},
            formLabelWidth: '90px',
            timer: null,
            show_dialog: false,
            type: 'add',
            dialogImageUrl: '',
            dialogVisible: false,
            file_list: [],
            imageUrl: '',
            rules: {
                brand_name: [
                    { required: true, message: '请输入品牌名称', trigger: 'blur' }
                ],
                brand_sort_by: [
                    { required: true, message: '请选择商品排序', trigger: 'change' }
                ],
                brand_sort: [
                    { required: true, message: '请选择logo排序', trigger: 'change' }
                ],
            }

        };
    },
    created() {
        console.log('created', this)
        this.$parent.tabs = [
            { label: '品牌列表', name: 'tab-list', path: 'tab-list' },
            { label: '礼品列表', name: 'show-goods', path: 'show-goods' },
        ]
        this.$parent.activeName = 'tab-list';
    },
    methods: {
        change(val, list) {
            console.log(val, list);
            this.file_list = list;
            console.log(this.form)
            console.log(this.file_list)
            this.imageUrl = URL.createObjectURL(val.raw);
            console.log(this.imageUrl)
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            console.log(file)
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        show_dialog_fn(data) {
            if (data) {
                this.item_data = data;
                this.imageUrl = data.brand_icon;
                this.form = JSON.parse(JSON.stringify(data));
                this.type = 'edit';
                // console.log(data)
                // this.getGoodDetail(data);
            } else {
                this.item_data = {};
                this.imageUrl = '';
                this.form = {};
                this.type = 'add';
            }
            this.show_dialog = true;
        },
        handleClose(done) {
            done = this.$refs.drawer.closeDrawer;
            //done 用于关闭 Drawer
            this.$refs['brandDrawer'].validate((valid) => {
                if (valid) {
                    if (this.loading) {
                        return;
                    }
                    this.loading = true;
                    let fd = new FormData();
                    fd.append('brand_name', this.form.brand_name);
                    fd.append('brand_sort', this.form.brand_sort);
                    fd.append('brand_sort_by', this.form.brand_sort_by);
                    fd.append('if_show', this.form.if_show);
                    fd.append('goods_images', this.file_list[0] && this.file_list[0].raw);//传文件
                    if (this.type === 'edit') {
                        fd.append('category_id', this.item_data.category_id);
                        this.editGood(fd).then(() => {
                            done();
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.loading = false;
                            }, 400);
                        })
                    } else {
                        this.addGood(fd).then(() => {
                            done();
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.loading = false;
                            }, 400);
                        })
                    }
                } else {
                    return false;
                }
            });
        },
        editGood(obj) {
            return this.$http.post('/admin/pointprod/index.php?act=pointBrand&op=update', obj).then((res) => {
                if (res.code === 1) {
                    for (let key in this.form) {
                        this.item_data[key] = this.form[key];
                    }
                    this.item_data.brand_icon = this.imageUrl;
                    this._message('success', res.msg);
                } else {
                    this._message('error', res.msg);
                }
            }, err => {
                this._message('error', res.msg);
            })
        },
        addGood(obj) {
            return this.$http.post('/admin/pointprod/index.php?act=pointBrand&op=add', obj).then((res) => {
                if (res.code === 1) {
                    this.$parent.getList();
                    this._message('success', res.msg);
                } else {
                    this._message('error', res.msg);
                }
            }, err => {
                this._message('error', res.msg);
            })
        },
        cancelForm() {
            this.loading = false;
            this.show_dialog = false;
            clearTimeout(this.timer);
        },
        getGoodDetail(id) {
            /* this.$http.get('/admin/pointprod/index.php?act=pointBrand&op=index&category_id='+id).then(res => {
                console.log(res)
                if (res.code === 1) {
                    this.goodDetail = res.data || {};	
                }
            }) */
        }
    },
    beforeDestroy() {
        console.log('beforeDestroy')
    }
};
</script>
<style lang="scss" scoped>
.el-form {
    width: 460px;
    padding-left: 10px;
}
.el-select /deep/.el-input {
    width: 370px;
}
/deep/.el-drawer__body {
    position: relative;
    padding-bottom: 60px;
}
.demo-drawer__footer {
    position: absolute;
    bottom: 10px;
    left: 20px;
}
.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader /deep/.el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>